<template>
  <div class="ranking">
    <div class="slider_bar">
      <div class="back" @click="back">
        <span class="iconfont icon-youjiantou1"></span>
      </div>
      <div class="wrap">
        <van-sidebar v-model="selectedRanking" background="#fff">
          <van-sidebar-item title="人气榜" />
          <van-sidebar-item title="畅销榜" />
          <van-sidebar-item title="新书榜" />
          <van-sidebar-item title="免费榜" />
          <van-sidebar-item :disabled="selectedRanking == 3" title="完结榜" />
        </van-sidebar>
      </div>
    </div>
    <div class="tabs">
      <van-tabs
        v-model="selectedDirction"
        background="#fff"
        :line-width="13"
        :line-height="3"
        @click="changedirection"
      >
        <van-tab title="男生">
          <div class="rank_list">
            <ul>
              <router-link
                tag="li"
                :to="{
                  name: 'comment',
                  query: { id: data.id, title: data.title },
                }"
                v-for="(data, index) in rangkingData"
                :key="data.id"
              >
                <div class="left">
                  <div class="img">
                    <img :src="data.cover" alt="" />
                  </div>
                </div>
                <div class="right">
                  <p class="book">
                    <i class="name">{{ data.title }}</i>
                    <span class="top_tab" v-if="index < 3"
                      >Top {{ index }}</span
                    >
                  </p>
                  <p class="description">
                    {{ data.content }}
                  </p>
                  <p class="type">
                    <span> {{ data.author }}</span
                    ><i> {{ data.category }}</i>
                  </p>
                </div>
              </router-link>
            </ul>
          </div>
        </van-tab>
        <van-tab title="女生">
          <div class="rank_list">
            <ul>
              <router-link
                tag="li"
                :to="{
                  name: 'comment',
                  query: { id: data.id, title: data.title },
                }"
                v-for="(data, index) in rangkingData"
                :key="data.id"
              >
                <div class="left">
                  <div class="img">
                    <img :src="data.cover" alt="" />
                  </div>
                </div>
                <div class="right">
                  <p class="book">
                    <i class="name">{{ data.title }}</i>
                    <span class="top_tab" v-if="index < 3"
                      >Top {{ index }}</span
                    >
                  </p>
                  <p class="description">
                    {{ data.content }}
                  </p>
                  <p class="type">
                    <span> {{ data.author }}</span
                    ><i> {{ data.category }}</i>
                  </p>
                </div>
              </router-link>
            </ul>
          </div></van-tab
        >
        <van-tab title="出版">
          <div class="rank_list">
            <ul>
              <router-link
                tag="li"
                :to="{
                  name: 'comment',
                  query: { id: data.id, title: data.title },
                }"
                v-for="(data, index) in rangkingData"
                :key="data.id"
              >
                <div class="left">
                  <div class="img">
                    <img :src="data.cover" alt="" />
                  </div>
                </div>
                <div class="right">
                  <p class="book">
                    <i class="name">{{ data.title }}</i>
                    <span class="top_tab" v-if="index < 3"
                      >Top {{ index }}</span
                    >
                  </p>
                  <p class="description">
                    {{ data.content }}
                  </p>
                  <p class="type">
                    <span> {{ data.author }}</span
                    ><i> {{ data.category }}</i>
                  </p>
                </div>
              </router-link>
            </ul>
          </div></van-tab
        >
        <van-tab title="听书">
          <div class="rank_list">
            <ul>
              <router-link
                tag="li"
                :to="{
                  name: 'comment',
                  query: { id: data.id, title: data.title },
                }"
                v-for="(data, index) in rangkingData"
                :key="data.id"
              >
                <div class="left">
                  <div class="img">
                    <img :src="data.cover" alt="" />
                  </div>
                </div>
                <div class="right">
                  <p class="book">
                    <i class="name">{{ data.title }}</i>
                    <span class="top_tab" v-if="index < 3"
                      >Top {{ index }}</span
                    >
                  </p>
                  <p class="description">
                    {{ data.content }}
                  </p>
                  <p class="type">
                    <span> {{ data.author }}</span
                    ><i> {{ data.category }}</i>
                  </p>
                </div>
              </router-link>
            </ul>
          </div></van-tab
        >
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { getRanking, getRankingDetail } from "../../api/ranking";
export default {
  data() {
    return {
      //选择模块
      selectedDirction: 0,
      //选择榜单
      selectedRanking: 0,
      // 各个模块的数据,从里面获取url
      boyRanking: null,
      girlRanking: null,
      publicRanking: null,
      listenRanking: null,
      // 获取该版块的榜单
      rangkingData: null,
      //所以板块的数据
      allData:null
      // 通过1级二级下标去获取url,遍历标签页和侧边滑动里面的rangkingdata一样的
      alevel: 0, //一级
      blevel: 0, //二级
    };
  },
  created() {
    this.getRankingFun();
  },

  mounted() {},
  watch: {
    selectedRanking: {
      handler(val) {
        let index = this.selectedDirction;
        this.selectedslider(val, index);
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    // 模块点击后,获取当前榜单索引的数据
    changedirection() {
      if (this.selectedDirction == 3) {
        this.selectedRanking = 3;
        this.selectedslider(this.selectedRanking, this.selectedDirction);
      }
    },
    selectedslider(val, dirctionIndex) {
      // 合并为二维数组,后面需要取值方便 注意concat是合并数组,不能变成二维数组
      var blockArr = [
        this.boyRanking,
        this.girlRanking,
        this.publicRanking,
        this.listenRanking,
      ];

      switch (val) {
        case 0: {
          let url = blockArr[dirctionIndex][val].naviInfos[0].url;
          getRankingDetail({ url }).then(({ data: res }) => {
            this.rangkingData = res.list;
            console.log(res);
          });
          break;
        }
        case 1: {
          let url = blockArr[dirctionIndex][val].naviInfos[0].url;
          getRankingDetail({ url }).then(({ data: res }) => {
            this.rangkingData = res.list;
            console.log(res);
          });
          break;
        }
        case 2: {
          let url = blockArr[dirctionIndex][val].naviInfos[0].url;
          getRankingDetail({ url }).then(({ data: res }) => {
            this.rangkingData = res.list;
            console.log(res);
          });
          break;
        }
        case 3: {
          console.log();
          let url = blockArr[dirctionIndex][val].naviInfos[0].url;
          getRankingDetail({ url }).then(({ data: res }) => {
            this.rangkingData = res.list;
            console.log(res);
          });
          break;
        }
        case 4: {
          let url = blockArr[dirctionIndex][val].naviInfos[0].url;
          getRankingDetail({ url }).then(({ data: res }) => {
            this.rangkingData = res.list;
            console.log(res);
          });
          break;
        }
      }
    },
    //获取索引模块的中个榜单对象
    getRankingFun() {
      getRanking().then(({ data: res }) => {
        this.allData = res.data.list[0];
        this.boyRanking = res.data.list[0].subNavis;
        this.girlRanking = res.data.list[1].subNavis;
        this.publicRanking = res.data.list[2].subNavis;
        this.listenRanking = res.data.list[3].subNavis;
        this.selectedslider(this.selectedRanking, this.selectedDirction);
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.ranking {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  .tabs {
    padding-top: 20px;
    width: 78%;

    /deep/.van-tabs__nav {
      .van-tab {
        flex: 0 0 45px;
      }
      .van-tab__text--ellipsis {
        color: #bababa;
        font-size: 13px;
      }
      .van-tab--active {
        .van-tab__text--ellipsis {
          font-size: 18px;
          color: #4e4e4e;
        }
      }
    }

    .rank_list {
      overflow-y: scroll;
      height: 90vh;
      ul {
        padding: 8px 12px;
        li {
          display: flex;
          padding: 13px 0;
          // justify-content: space-between;
          .left {
            .img {
              width: 40px;
              height: 52px;
              box-shadow: 3px 2px 8px -3px #706e6b;
              img {
                width: 40px;
                height: 52px;
              }
            }
          }
          .right {
            width: 200px;
            margin-left: 13px;
            line-height: 20px;
            .book {
              display: flex;
              justify-content: space-between;
              i {
                font-style: normal;
                font-size: 18px;
                color: #383838;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                word-break: break-all;
              }
            }
            .description {
              font-size: 12px;
              color: #d5d5d5;
              overflow: hidden; // 溢出隐藏
              white-space: nowrap; // 强制一行
              text-overflow: ellipsis; // 文字溢出显示省略号
              width: 100%;
            }
            .type {
              position: relative;
              color: #a2a2a2;
              font-size: 12px;
              i {
                margin-left: 10px;
              }
              &::after {
                position: absolute;
                top: 50%;
                left: 52px;
                transform: translateY(-50%);
                width: 1px;
                height: 10px;
                content: "";
                background-color: #ececec;
              }
            }
          }
        }
        & li:nth-of-type(1) {
          .book {
            .top_tab {
              display: block;
              width: 37px;
              height: 13px;
              background: #ff4433;
              line-height: 13px;
              text-align: center;
              font-size: 13px;
              color: #fff;
            }
          }
        }
        & li:nth-of-type(2) {
          .book {
            .top_tab {
              display: block;
              width: 37px;
              height: 13px;
              line-height: 13px;
              text-align: center;
              font-size: 13px;
              background: #ff7a00;
            }
          }
        }
        & li:nth-of-type(3) {
          .book {
            .top_tab {
              display: block;
              width: 37px;
              height: 10px;
              background: #ffb800;
              line-height: 10px;
              text-align: center;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
  .slider_bar {
    position: relative;
    width: 22%;
    padding-top: 68px;
    .back {
      position: absolute;
      top: 30px;
      left: 20px;
      .iconfont {
        font-size: 20px;
        color: #8b8886;
      }
    }
    .wrap {
      height: calc(100vh - 68px);
      border-right: 2px solid #f2f2f2;
      /deep/.van-sidebar {
        .van-sidebar-item {
          background-color: #fff;

          .van-sidebar-item__text {
            color: #a2a2a2;
            text-align: center;
            font-size: 13px;
          }
        }
        .van-sidebar-item--select::before {
          position: absolute;
          top: 50%;
          left: 77px;
          width: 1px;
          height: 10px;
          background-color: #ee0a24;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
          content: "";
        }
      }
    }
  }
}
</style>